<template>
  <div>
    <header-comp :totalIncome="state.totalIncome" />
    <form-comp @add-income="AddIncome" />
    <income-list :state="state" @RemoveItem="RemoveItem" />
  </div>
</template>

<script lang="ts" setup>
import HeaderComp from './components/HeaderComp.vue'
import FormComp from './components/FormComp.vue'
import IncomeList from './components/IncomeList.vue'
import { computed, reactive } from 'vue'

const state = reactive({
  income: [],
  totalIncome: computed(() => {
    let temp = 0
    if (state.income.length > 0) {
      for (let i = 0; i < state.income.length; i++) {
        temp += state.income[i].value
      }
    }
    return temp
  })
})

const AddIncome = (data) => {
  const d = data.date.split('-')
  const newD = new Date(d[0], d[1], d[2])

  state.income = [...state.income, {
    id: Date.now(),
    desc: data.desc,
    value: parseInt(data.value),
    date: newD.getTime()
  }]
}

const RemoveItem = (data) => {
  for (let i = 0; i < state.income.length; i++) {
    if (state.income[i].id === data) {
      state.income.splice(i, 1)
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fira Sans', sans-serif;
}

body {
  background: #eee;
}
</style>
